<template>
  <!-- 放大镜 -->
  <div class="slide">
    <div class="bigImg" ref="defaultBoxRef" @mouseenter="showMask" @mouseleave="isLoupeShow = false"  @mousemove="setMaskPosition">
      <img :src="defaultPicUrl" alt=""/>
      <div class="mask" ref="maskRef" v-show="isLoupeShow"></div>
    </div>
    <ul class="imgList" @mouseover="setDefalutImg">
      <li>
        <img
          :src="itemDetail!.picUrl1"
          alt=""
          :class="{imgActive:itemDetail!.picUrl1 === defaultPicUrl}"
        />
      </li>
      <li>
        <img
          :src="itemDetail!.picUrl2"
          alt=""
          :class="{imgActive:itemDetail!.picUrl2 === defaultPicUrl}"
        />
      </li>
      <li>
        <img
          :src="itemDetail!.picUrl3"
          alt=""
          :class="{imgActive:itemDetail!.picUrl3 === defaultPicUrl}"
        />
      </li>
      <li>
        <img
          :src="itemDetail!.picUrl4"
          alt=""
          :class="{imgActive:itemDetail!.picUrl4 === defaultPicUrl}"
        />
      </li>
      <li>
        <img
          :src="itemDetail!.picUrl5"
          alt=""
          :class="{imgActive:itemDetail!.picUrl5 === defaultPicUrl}"
        />
      </li>
    </ul>
    <div class="loupe-box" ref="loupeBoxRef"  v-show="isLoupeShow">
      <img :src="defaultPicUrl" alt=""  ref="loupeImgRef"/>
    </div>
  </div>
</template>
<script lang="ts">
  export default {
    name: "Loupe",
  };
</script>
<script setup lang="ts">
  import type { ItemDetail } from "@/api/detail/interface";
  import throttle from "lodash/throttle";
  import { onMounted, ref } from "vue";
  const isLoupeShow = ref<boolean>(false)
  const defaultBoxRef = ref<HTMLElement | null>(null);
  const maskRef = ref<HTMLElement | null>(null);
  const loupeBoxRef = ref<HTMLElement | null>(null);
  const loupeImgRef = ref<HTMLElement | null>(null);
  type Props = {
    itemDetail: ItemDetail;
    defaultPicUrl: string;
    setDefalutImg: (e: any) => void;
  };
  defineProps<Props>();
  //计算盒子到页面顶部的距离
  const offsetLeft = (target: HTMLElement) => {
    let left = target.offsetLeft;
    while (target.offsetParent !== null) {
      target = target.offsetParent as unknown as HTMLElement;
      left += target.offsetLeft;
    }
    return left;
  };
  //计算盒子到页面左边缘的距离
  const offsetTop = (target: HTMLElement) => {
    let top = target.offsetTop;
    while (target.offsetParent !== null) {
      target = target.offsetParent as unknown as HTMLElement;
      top += target.offsetTop;
    }
    return top;
  };
  const showMask = (e)=>{
    isLoupeShow.value = true
    setMaskPosition(e)
  }
  //监听鼠标移动设置遮罩层的位置
  const setMaskPosition = throttle((e) => {
    // 计算鼠标在bigImg盒子里的距离
    let maskLeft =e.pageX -offsetLeft(defaultBoxRef.value!) -maskRef.value!.offsetWidth / 2;
    let maskTop =e.pageY -offsetTop(defaultBoxRef.value!) -maskRef.value!.offsetHeight / 2;
    if (maskLeft < 0) {
        maskLeft = 0
    }
    if (maskLeft >= defaultBoxRef.value!.offsetWidth-maskRef.value!.offsetWidth) {
        maskLeft = defaultBoxRef.value!.offsetWidth-maskRef.value!.offsetWidth;
    }
    if (maskTop < 0) {
        maskTop = 0
    }
    if (maskTop >= defaultBoxRef.value!.offsetHeight-maskRef.value!.offsetHeight) {
        maskTop = defaultBoxRef.value!.offsetHeight-maskRef.value!.offsetHeight;
    }
    maskRef.value!.style.left = maskLeft + "px";
    maskRef.value!.style.top = maskTop + "px";
    // 计算放大镜图片位置
    let loupeImgLeft = loupeImgRef.value!.offsetWidth * maskLeft / defaultBoxRef.value!.offsetWidth
    let loupeImgTop = loupeImgRef.value!.offsetHeight * maskTop / defaultBoxRef.value!.offsetHeight
    loupeImgRef.value!.style.marginLeft = -loupeImgLeft + 'px'
    loupeImgRef.value!.style.marginTop = -loupeImgTop + 'px'
  }, 30);
</script>
<style scoped lang="less">
  .slide {
    position: relative;
    width: 430px;
    float: left;
  }
  .bigImg {
    position: relative;
    width: 428px;
    height: 428px;
    overflow: hidden;
    vertical-align: middle;
    img {
      width: 100%;
      height: 100%;
    }
    background-color: #F4F4F4;
  }
  .imgList {
    width: 430px;
    height: 78px;
    margin: 14px 0 0;
  }
  .imgActive {
    border: 1px solid #b0a078;
  }
  .imgList li {
    float: left;
    width: 76px;
    height: 76px;
    box-sizing: border-box;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      border: 1px solid #b0a078;
    }
  }
  .imgList img {
    width: 100%;
    height: 100%;
  }
  .mask {
    position: absolute;
    width: 214px;
    height: 214px;
    background-color: #b0a07853;
    cursor: move;
  }
  .loupe-box {
    width: 428px;
    height: 428px;
    position: absolute;
    top: 0;
    background-color: #fff;
    left: 440px;
    overflow: hidden;
    img {
      width: 856px;
      height: 856px;
    }
  }
</style>
